<template>
    <div class="personalData">
        <div class="field-box">
            <div class="name">用户姓名</div>
            <van-field
                class="input"
                v-model="userForm.userName"
                name="用户姓名"
                placeholder="用户姓名"
                :rules="[{ required: true, message: '请填写用户姓名' }]"
            />
            <div class="name">手机号码</div>
            <van-field
                class="input"
                v-model="userForm.userPhone"
                name="手机号码"
                placeholder="手机号码"
                :rules="[{ required: true, message: '请填写手机号码' }]"
            />
            <div class="name">电子邮箱</div>
            <van-field
                class="input"
                v-model="userForm.userAccount"
                name="电子邮箱"
                placeholder="电子邮箱"
                :rules="[{ required: true, message: '请填写收货地址' }]"
            />
        </div>
        <van-button class="popup-btn" type="primary" @click="confirm" block>保存</van-button>
    </div>
</template>

<script>
    
export default {
    name: '',
    props: {
    },
    data () {
        return {
            userForm:{
                userName:'',
                userID: '',
                userPhone: '',
                userAccount: '',
                userAvatar: '',
            },
        }
    },
    created(){
        this.init();
    },
    mounted() {
        
    },
    methods:{
        confirm(){
            if(this.userForm.userName == ''){
                this.$toast('请填写用户姓名');
                return;
            }
            if(this.userForm.userPhone == ''){
                this.$toast('请填写手机号码');
                return;
            }
            if(this.userForm.userAccount == ''){
                this.$toast('请填写电子邮箱');
                return;
            }
            this.$api.put(this.$url.user.user,this.userForm).then(res=>{
                if(res.code == 'SUCCESS'){
                    this.$toast('修改成功');
                    this.$router.go(-1);
                }
            })
        },
        init(){
            this.$api.get(this.$url.user.info).then(res=>{
            console.log('my...res:',res)
            if(res.code == 'SUCCESS'){
                this.userForm = res.data;
            }else{
                
            }
        })
        }
    }
}
</script>

<style scoped lang='scss'>
@import "@/assets/css/variable.scss";
.personalData{
    padding: .45rem;
    background: #fff;
}
    .field-box{
        margin-top: .5rem;
        .name{
            font-size: .28rem;
            margin-top: .24rem;

        }
        .input{
            margin-top: .12rem;
            border: 1px solid #D6D7DC;
        }
    }
    .popup-btn{
        margin-top: .95rem;
    }
</style>